<template>
    <!-- 送货上门 (地址选择) -->
    <div class="box">
        <!-- 顶部导航 -->
        <van-nav-bar title="标题" left-text="" left-arrow @click-left="$router.back()">
            <template #title>
                <van-button plain hairline type="primary" :class="{ 'active': flag == 1 }"
                    @click="flagone">门店自提</van-button>
                <van-button plain hairline type="primary" :class="{ 'active': flag == 2 }"
                    @click="flagtwo">送货上门</van-button>
            </template>
            <template #right>
                <van-dropdown-menu>
                    <van-dropdown-item v-model="value" :options="option" />
                </van-dropdown-menu>
            </template>
        </van-nav-bar>

        <!-- 我的收货地址 -->
        <div class="myaddress">
            <span>我的收货地址</span>
            <span @click="tomyaddress">管理我的地址</span>
        </div>


        <!-- 添加地址 -->
        <!-- 遍历数据 倒序 -->
        <van-cell v-for="(item, index) in list.reverse()" @click="AddOrder(item.addressId)">

            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">{{ item.address }} {{ item.addressDetail }}</span>
            </template>
            <template #label>
                <span>{{ item.isDefault }}</span>
                <van-tag plain type="primary">{{ item.Labelress }}</van-tag>
                <span>{{ item.tel }}</span>
                <span>{{ item.name.slice(0, 1) }}{{ item.sex == '男' ? '先生' : '女士' }}</span>
            </template>

        </van-cell>
        <!-- 新增地址 -->
        <div class="addAddress"><van-button type="primary" @click="toaddressList" block>+添加地址</van-button></div>




    </div>
</template>

<script setup>


//hooks组件useprovide
import { useProvide } from '../../hooks/useprovide'
import { onMounted } from 'vue';
const { list,
    flag,
    flagone,
    flagtwo,
    value,
    option,
    AddOrder,
    toaddressList,
    tomyaddress,
    Rendeaddress
} = useProvide()




</script>

<style lang="scss" scoped>
.van-nav-bar {
    width: 100%;
    height: 44px;
    background-color: #fff;
    border-bottom: 1px black solid;

    .van-button {
        width: 81px;
        height: 30px;
        border-radius: 10%;
        font-size: 13px;
        color: #88afd5;
    }

    .active {
        color: #fff;
        background-color: #88afd5;
    }

    .van-dropdown-menu {
        width: 46px;
        --van-dropdown-menu-title-text-color: black;
        --van-dropdown-menu-title-font-size: 13px;
        --van-dropdown-menu-height: 20px;
        --van-dropdown-menu-shadow: 0
    }
}

.myaddress {
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    margin: 0 14px;
    line-height: 30px;

    span {
        color: #ccc;
    }

    span:last-child {
        color: #88afd5;
    }
}

.van-cell {
    --van-cell-height: 64px;
    --van-cell-group-title-font-size: 15px;
    margin-bottom: 10px;

    span {
        margin: 0 5px;
        font-size: 14px;
    }

    .van-tag {
        font-size: 10px;
        height: 18px;
    }
}

//到达一定的长度变成省略号
.custom-title {
    display: inline-block;
    width: 250px;
    margin-right: 4px;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.search-icon {
    font-size: 16px;
    line-height: inherit;
}

.van-address-list {
    -van-address-list-add-button-border-radius: 0;
    -van-address-list-add-button-height: 50px
}

.addAddress {
    width: 375px;
    position: fixed;
    height: 60px;
    bottom: 0;
    background-color: #fff;


    .van-button {
        width: 345px;
        height: 40px;
        margin: 10px 15px;
        background-color: #88afd5;
        border: none;
        color: #fff;
        font-size: 16px;
        font-weight: 900;
    }

}
</style>